<template>
  <div>
        <!--展示物料产品分类表格-->
        <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key='id'
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="name"
          label="分类">
        </el-table-column>
        <el-table-column
          prop="sortOrder"
          label="排序"
        ></el-table-column>
        <el-table-column
          prop="brand"
          label="品牌">
        </el-table-column>
        <el-table-column
          prop="status"
          label="是否上架">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 0? 'success' : 'danger'">
              {{ scope.row.status === 0 ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
        ></el-table-column>
        <el-table-column
          prop="stock"
          label="库存"
        ></el-table-column>
        <el-table-column
          prop="createdAt"
          label="创建时间"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
            v-if="scope.row.sortOrder"
              size="mini"
              @click="handleEdit(scope.$index,scope.row,'修改商品')">编辑
            </el-button>
            <el-button
            v-if="scope.row.sortOrder"
              size="mini"
              @click="handleEdit(scope.$index,scope.row,'添加商品')">新增
            </el-button>
            <el-button
              v-if="scope.row.parentId !== 0"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
        <!--  分类表的新增/编辑弹窗 -->
    <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="45%"
  >
    <el-row>
      <el-form ref="form" :model="form" size="medium" label-width="100px">
        <!--隐藏一个父分类的输入框,用于携带父分类的id-->
        <input type="hidden" v-model="form.id">
        <el-col :span="24">
          <el-form-item label="父分类">
            <el-input v-model="form.pname" placeholder="请输入父分类" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="分类名称">
                <el-input v-model="form.name" placeholder="请输入分类名称"
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="sortOrder">
                <el-input-number v-model="form.sortOrder" placeholder="显示排序"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog('form')" size="medium" :disabled="loading = false">取 消</el-button>
      <el-button type="primary" @click="handleSave('form')">确 定</el-button>
    </div>
  </el-dialog>

  </div>
</template>

<script>
  import { list,deleteProductCategory,addProductCategory,updateProductCategory} from "@/api/product/productCategory.js"
  export default {
    name: 'ProductCategory',
    data() {
      return {
        tableData:[],
        form:{
          id:null,
          name:null,
          pname:null,
          sortOrder:null,
        },
        dialogVisible:false,
        title:'添加商品',

      }
    },
    methods: {
      findAllList(){
        list()
        .then(res=>{
          this.tableData = res.data
        })
      },
      handleDelete(index,row){
        if (row.children?.length > 0) {
        this.$message({
          message: '分类下有子分类,请先删除子分类后再删除该分类',
          type: 'error'
        });
      }else{
        this.$confirm('此操作将永久删除该数据, 是否继续?', '删除用户!', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row.id);
          deleteProductCategory(row.id)
          .then(res=>{
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
            this.findAllList()
          })
        }).catch(() => {
          this.$message({
            message: '已取消删除',
            type: 'info'
          });
        })
      }
      },
      handleEdit(index,row,title){
        this.title = title
        if(this.title === "添加商品"){
          this.form = {}
          this.form.pname = row.name
          this.form.id = row.id
        }else{
          this.form.pname = row.name
          this.form.name = row.name
          this.form.id = row.id
          this.form.sortOrder = row.sortOrder
         }
        this.dialogVisible = true
      },
    closeDialog(){
      this.dialogVisible = false
      this.form = {}
    },
    handleSave(form){
      if (this.title === '添加商品') {
        addProductCategory(this.form)
          .then(res => {
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.dialogVisible = false
            this.findAllList();
          });
      } else {
        updateProductCategory(this.form)
          .then(res => {
            this.$message({
              message: '更新成功',
              type: 'success'
            });
            this.dialogVisible = false
            this.findAllList();
          });
      }
    }
},
  created() {
      this.findAllList()
    },
}
</script>
